<!--子栏目组件-->
<template>
  <div class="out">
    <ul>
      <div class="top">
        <li>{{ parentColumnName }}</li>
      </div>
      <div class="sub">
        <li
          v-for="childcolumn in currentParentSubColumns"
          :key="childcolumn.name"
          :class="{ active: isActive(childcolumn.path) }"
        >
          <router-link :to="{ path: childcolumn.path }">
            {{ childcolumn.name }}
          </router-link>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["subColumns", "parentColumns"]),
    currentParentColumn() {
      const path = this.$route.path;
      return this.parentColumns.find((parent) => {
        return parent.path === `/${path.split("/")[1]}`;
      });
    },

    parentColumnName() {
      return this.currentParentColumn ? this.currentParentColumn.column_name : "";
    },

    currentParentSubColumns() {
      if (this.currentParentColumn) {
        return this.subColumns.filter(
          (sub) => sub.column_id === this.currentParentColumn.column_id
        );
      } else {
        return [];
      }
    },
  },

  methods: {
    isActive(path) {
      // 使用 startsWith 方法判断当前路径是否以指定子栏目路径开头
      return this.$route.path.startsWith(path);
    },
  },
};
</script>


<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style: none;
}

.top li {
  width: 200px;
  height: 80px;
  line-height: 70px;
  font-size: 25px;
  text-align: center;
  background-color: #0e4f8f;
  color: white;
  position: relative;
}

.sub li {
  position: relative;
  width: 200px;
  height: 60px;
  line-height: 60px;
  list-style: none;
  font-size: 15px;
  text-align: center;
  background-color: white;
  color: black;
}

.sub li a {
  display: block;
  text-decoration: none;
  color: black;
}

.sub li.active a {
  background-color: #3b71b1;
  color: #fff;
}

.sub li a:hover {
  background-color: #3b71b1;
  color: white;
}
</style>
